<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %> 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap core CSS -->
<link rel="stylesheet" type="text/css" href="../../bootstrap-3.3.7/dist/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="../../bootstrap-3.3.7/dist/css/bootstrap-theme.min.css" />
<link rel="stylesheet" type="text/css" href="../../css/index.css" />
<link rel="stylesheet" type="text/css" href="../../css/personal.css" />
<link rel="stylesheet" type="text/css" href="../../css/background.css" />
<link rel="stylesheet" type="text/css" href="../../css/bootstrapValidator.min.css" />
<link rel="stylesheet" type="text/css" href="../../css/upload/fileinput.css" />

<!--上传图片  -->

<script type="text/javascript"
	src="../../bootstrap-3.3.7/dist/js/jquery.min.js"></script>
<script type="text/javascript"
	src="../../js/search/address.js"></script>
<script type="text/javascript" src="../../js/upload/fileinput.js"></script>
<script type="text/javascript" src="../../js/upload/zh.js"></script>
<script type="text/javascript" src="../../js/bootstrapValidator.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<link  href="../../bootstrap-3.3.7/docs/assets/css/ie10-viewport-bug-workaround.css"
	rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>



<script type="text/javascript">
//表单验证
$(document).ready(function() {
	$("#userimage").attr("src","../../image/user/${user.picture_url}?tmp="+Math.random());
	$("#fileimage").fileinput({
        language: 'zh', //设置语言
        uploadUrl: "uploadImage", //上传的地址
        allowedFileExtensions: ['jpg', 'gif', 'png'],//接收的文件后缀
        showUpload: true, //是否显示上传按钮
        showCaption: true,//是否显示标题
        browseClass: "btn btn-primary", //按钮样式  
        uploadAsync: true, //默认异步上传
        //dropZoneEnabled: false,//是否显示拖拽区域
       	/* minImageWidth: 100, //图片的最小宽度
        minImageHeight: 100,//图片的最小高度
        maxImageWidth: 100,//图片的最大宽度
        maxImageHeight: 100,//图片的最大高度 */
        maxFileSize: 1024,//单位为kb，如果为0表示不限制文件大小
        //minFileCount: 0,
        maxFileCount: 1, //表示允许同时上传的最大文件个数
        enctype: 'multipart/form-data',
        validateInitialCount:true,
        previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",
        msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}！",
        language:'zh',
    });
	
	//导入文件上传完成之后的事件
    $("#fileimage").on("fileuploaded", function (event, data, previewId, index) {
      var result = data.response;
        if (result == 1) {
            window.location="../infocenter/getinfocenter";
        }
    });
	//$("#uploadBtn").attr("disabled",true);
		$('#user_form').bootstrapValidator({
			message : 'This value is not valid',
			feedbackIcons : {
				valid : 'glyphicon glyphicon-ok',
				invalid : 'glyphicon glyphicon-remove',
				validating : 'glyphicon glyphicon-refresh'
			},
			fields : {
				email : {
					validators : {
						emailAddress : {
							message : 'The input is not a valid email address'
						}
					}
				}
			}
		})
		//地址的三级联动的选择
		address();
	});
	$.fn.serializeObject = function() {
		var o = {};
		var a = this.serializeArray();
		$.each(a, function() {
			if (o[this.name]) {
				if (!o[this.name].push) {
					o[this.name] = [o[this.name]];
				}
				o[this.name].push(this.value || '');
			} else {
				o[this.name] = this.value || '';
			}
		});
		return o;
	};
	function updateUser() {
		var bootstrapValidator = $("#user_form").data('bootstrapValidator');
    	$('#registerForm').bootstrapValidator('validate');
    	if(bootstrapValidator.isValid()){
    		$("#updateBtn").attr("disabled", "true");
    		var jsonuserinfo = $('#user_form').serializeObject();
    		$.ajax({
    			type : 'POST',
    			url : 'updateUser',
    			data : jsonuserinfo,
    			success : function(result) {
    				if (result == 1){
    					$("#updateBtn").removeAttr("disabled");
    					alert("修改成功");
    				}		
    				else{
    					$("#updateBtn").removeAttr("disabled");
    					alert("修改失败");
    				}
    			}
    		});
    	}
		
	}
	function pwdupdate(){
		var userid = $("#user_id").val();
		$("#refresh").load('../infocenter/pwdupdate.jsp?userid='+userid);
	}
	function promptinfo()
	{
       $("#user_address").val($("#province").val()+";"+$("#city").val()+";"+$("#town").val());
	}
	function address(){
		var useraddress = $("#user_address").val();
		setup();
		promptinfo();
		//加载省份的下拉框
		if(useraddress !=null){
			var strarry = useraddress.split(";");
			$("#province").val(strarry[0]);
			$("#city").val(strarry[1]);
			$("#town").val(strarry[2]);
		    preselect(strarry[0]);
		    $("#city option:contains('"+strarry[1]+"')").attr("selected", true);
		    change(2);
		    $("#town option:contains('"+strarry[2]+"')").attr("selected", true);
			promptinfo();
		}
	}
	
</script>
</head>
		<body>
				<h4 class="heading">个人信息</h4>
				<div class="myline"></div>
				<form class="form-horizontal" style="padding-top: 20px" id="user_form">
					<div class="row">
						<div class="col-md-9">
							<div class="form-group">
								<label class="col-md-3 control-label">用户名:</label>
								<div class="col-md-9">
									<input type="text" style="border: none; background-color: #F5FFFA;" readonly="readonly" class="form-control" value="${user.user_id}" id="user_id" name="user_id">
								</div>
							</div>
							<c:set var="rolename" value="${rolename }"/>
							<c:if test="${!fn:contains(rolename,'知识管理员')}">
							<div class="form-group">
								<label class="col-md-3 control-label">积分:</label>
								<div class="col-md-9">
									<input type="text" style="border: none; background-color: #F5FFFA;" readonly="readonly" class="form-control" value="${user.user_point}" id="user_point" name="user_point">
								</div>
							</div>
							</c:if>
							<div class="form-group">
								<label class="col-md-3 control-label">昵称:</label>
								<div class="col-md-9">
									<input type="text"   class="form-control" value="${user.user_name}" id="user_name" name="user_name">
								</div>
							</div>
							<div class="form-group">
								<label class="col-md-3 control-label">邮箱:</label>
								<div class="col-md-9">
									<input type="email" id="user_email" name="user_email" class="form-control" placeholder="Email" value="${user.user_email}">
								</div>
							</div>
							<div class="form-group">
								<label class="col-md-3 control-label">行业:</label>
								<div class="col-md-9">
									<select class="combobox" style="height: 30px; width: 100%; float: left" id="user_profession_id" name="user_profession_id">
										<option></option>
										<c:forEach items="${profession}" var="profession">
											<c:choose>
												<c:when test="${user.user_profession_id==profession.profession_id}">
													<option value="${profession.profession_id}" selected="selected">${profession.profession_name}</option>
												</c:when>
												<c:otherwise>
													<option value="${profession.profession_id}">${profession.profession_name}</option>
												</c:otherwise>
											</c:choose>
										</c:forEach>
									</select>
								</div>
							</div>
							<div class="form-group">
								<label class="col-md-3 control-label">职业:</label>
								<div class="col-md-9">
									<select class="combobox" style="height: 30px; width: 100%; float: left" id="user_identity_id" name="user_identity_id">
										<option></option>
										<c:forEach items="${identity}" var="identity">
											<c:choose>
												<c:when test="${user.user_identity_id==identity.identity_id}">
													<option value="${identity.identity_id}" selected="selected">${identity.identity_name}</option>
												</c:when>
												<c:otherwise>
													<option value="${identity.identity_id}">${identity.identity_name}</option>
												</c:otherwise>
											</c:choose>
										</c:forEach>
									</select>
								</div>
							</div>
							<div class="form-group">
								<label class="col-md-3 control-label">单位:</label>
								<div class="col-md-9">
									<input type="text" class="form-control" value="${user.user_company}" id="user_company" name="user_company">
								</div>
							</div>
							<div class="form-group">
								<label class="col-md-3 control-label">所在地:</label>
								<div class="col-md-9" style="margin-top:5px">
	 								<select class="combobox"   style="height:30px"  id="province">
						             	 <option></option>
						             </select>
						            <select class="combobox"   style="height:30px;margin-left:10px"  id="city">
						              	 <option></option>
						            </select>
						            <select class="combobox"   style="height:30px;margin-left:10px"  id="town">
						              	 <option></option>
		            				</select>
           				 			 <input  class="form-control" id="user_address"    name="user_address" type="hidden" value="${user.user_address }" />
 									</div>
							</div>
							<center>
								<div class="form-group sepH_c">
									<div class="col-md-12">
										<!-- <button type="submit" class="btn  btn-info">提交信息</button> -->
										<button type="button" id="updateBtn" class="btn  btn-info" onclick="updateUser()">提交信息</button>
									</div>
								</div>
							</center>
						</div>
						<div class="col-md-3" id="up-img-touch">
							<div style="margin-left:20px;">
								<c:choose>
								<c:when test="${empty user.picture_url}">
									<img class="img-thumbnail" src="../../image/user/default.jpg" style="width:100px;height:120px"> 
								</c:when>
								<c:otherwise>
									<img class="img-thumbnail"  src="../../image/user/${user.picture_url}"  id="userimage"  style="width:100px;height:120px">
								</c:otherwise>
								</c:choose>
							</div>
 							<a href="" data-toggle="modal" data-target="#mymodal">
							 <span style="font-weight: bold;font-family: 宋体" class="text-primary" >修改头像</span></a> 
							 <a onclick="pwdupdate()"><span style="padding-left:15px;font-weight:bold;font-family: 宋体" class="text-primary" >修改密码</span></a>
						</div>
					</div>
				</form>
	
			<div class="modal fade" id="mymodal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
			  <div class="modal-dialog" role="document">
			    <div class="modal-content">
			      <div class="modal-header">
			        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
			        <h4 class="modal-title" id="myModalLabel">图片上传</h4>
			      </div>
			      <div class="modal-body">
			        	<form class="form-horizontal required-validate" action="" enctype="multipart/form-data" method="post">
						    <div class="form-group">
						        <div class="col-md-10 tl th" id="fileinput">
						            <input type="file" name="image" id="fileimage" class="projectfile" />
						            <p class="help-block">支持jpg、jpeg、png、gif格式，大小不超过1.0M</p>
						        </div>
						    </div>  
						</form>    
			      </div>
			      <div class="modal-footer">
			        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
			      </div>
			    </div>
			  </div>
			</div>	
</body>
</html>